<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车案例</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="title">购物车</div>
  <table class="table" width="700" border="1">
    <thead>
      <tr>
        <th width="60">
          <label for="">
            <input type="checkbox">
            全选
          </label>
        </th>
        <th width="60">序号</th>
        <th>商品名称</th>
        <th>商品图片</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>价格小计</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center">
        <td>
          <input class="check" type="checkbox">
        </td>
        <td>1</td>
        <td>苹果</td>
        <td class="img">
          <img src="" style="width:70px;height:70px;" alt="">
        </td>
        <td class="price">100</td>
        <td class="num">
          <span class="reduce">-</span>
          <input value="1" type="text">
          <span class="add">+</span>
        </td>
        <td class="account">100</td>
        <td>
          <button class="del">删除</button>
        </td>
      </tr>
      <tr>
        <td colspan="8" align="center">暂无商品信息</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="8" align="right">
          <span class="totalNum">商品总数：<i>0</i></span>
          <span class="totalPrice">合计总价：<i>0.00</i></span>
          <span class="buy">立即付款</span>
        </td>
      </tr>
    </tfoot>
  </table>
</body>
<script src="../jquery.js"></script>
<script>


  let p = JSON.stringify({
    title: '小米手机',
    img: 'img',
    goods_id: 1,
    cate_id: 2,
    price: 1999,
    buy_num: 2,
    is_selected: 0
  })
  getXuan()
  function getXuan(l=1) {
    $.ajax({
      "method": "GET",
      "url": "http://124.223.14.236:3001/api/cart",
      "headers": {
        "Authorization": localStorage.getItem('token')
      },
      success(res) {
        console.log(res);
        let n = res.data.map(item => {
          let n
          if (item.is_selected === 0) {
            n = ''
          } else {
            n = checked
          }
          return `
      <tr align="center" checked>
        <td>
          <input class="check" type="checkbox" ${n}>
        </td>
        <td>1</td>
        <td>${item.title}</td>
        <td class="img">
          <img src="" style="width:70px;height:70px;" alt="">
        </td>
        <td class="price">${item.price}</td>
        <td class="num">
          <span class="reduce">-</span>
          <input value="${item.buy_num}" type="text" id="shu">
          <span class="add">+</span>
        </td>
        <td class="account">${item.price * item.buy_num}</td>
        <td>
          <button class="del" data-id="${item.id}">删除</button>
        </td>
      </tr>
      <tr>
        <td colspan="8" align="center">暂无商品信息</td>
      </tr>
      `
        }).join('')
        $('tbody').html(n)
      }
    });
  }

//点击删除
$('body').on('click','.del',function(){
 let id= $(this).attr('data-id')
  $.ajax({
      "method": "DELETE",
      "url": `http://124.223.14.236:3001/api/cart/delete/${id}`,
      headers:{
      Authorization:localStorage.getItem('token')
    },
      success(res){
        if(res.success){
          alert(res.msg)
        }else{
          alertres.msg
        }
        console.log(res);
      }
    })
})

  // 点击加号
  $('body').on('click', '.add', function () {
    let n = +$(this).siblings('input').val() + 1
    $(this).siblings('input').val(n)
         $(this).parent().siblings('.account').html(n*1999)
  })
  $('body').on('click', '.reduce', function () {
    let n = +$(this).siblings('input').val() - 1
    if(n<=0){
      return n=1
    }
         $(this).siblings('input').val(n)
         $(this).parent().siblings('.account').html(n*1999)
  })

</script>

</html>